/**
 * Companion of typ/util.typ.
 */

/* `#prompt` */
article.prompt {
  font-size: 90%;
  color: var(--gray-color);

  > .license {
    font-size: 80%;
  }
}

/* Small links containing icons */
.unbreakable {
  display: inline-block;
}

/* `#unichar` */
/* Inspired by clreq `.uname` and Wikipedia [[Template:Unichar]] */
.unichar {
  .code-point {
    font-family: monospace;
    font-size: 0.8em;
    letter-spacing: 0.03em;
  }
  .small-caps {
    font-variant-caps: small-caps;
  }
}

/* `#note` */
aside.note {
  margin-block: 1em;
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding-inline: 1.5em;
  padding-block: 0.5em;

  > .note-title {
    margin-top: 0;
    font-weight: bold;
    color: var(--accent);
  }
}

/* `details.now-fixed` */
details.now-fixed {
  margin-block: 1em;
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding-inline-start: 1.5em;
  padding-block: 0.5em;

  > summary {
    cursor: pointer;
    margin-left: -0.5em;
    margin-bottom: 0.25em;

    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;

    font-weight: bold;
    color: var(--accent);

    /* Replace ::marker with ::before */
    list-style: none;
    &::-webkit-details-marker {
      display: none;
    }

    &::before {
      display: flex;
      align-items: center;
      height: 2em;
      width: 2em;
    }

    > p {
      margin-block: 0;
    }
  }

  > summary::before {
    content: "▶";
  }
  &[open] > summary::before {
    content: "▼";
  }
}
